<!DOCTYPE html>
<html ng-app="ionicApp">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic App</title>

  <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
  <script src="script.js"></script>

</head>

<body animation="slide-left-right-ios7">

  <ion-nav-bar class="nav-title-slide-ios7 bar-light">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

  <script id="intro.html" type="text/ng-template">
    <ion-view>

      <ion-nav-buttons side="left">
        <button class="button button-positive button-clear no-animation"
                ng-click="startApp()" ng-if="!slideIndex">
          Skip Intro
        </button>
        <button class="button button-positive button-clear no-animation"
                ng-click="previous()" ng-if="slideIndex > 0">
          Previous Slide
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-positive button-clear no-animation"
                ng-click="next()" ng-if="slideIndex != 2">
          Next
        </button>
        <button class="button button-positive button-clear no-animation"
                ng-click="startApp()" ng-if="slideIndex == 2">
          Start using MyApp
        </button>
      </ion-nav-buttons>

      <ion-slide-box on-slide-changed="slideChanged(index)">
        <ion-slide>
          <h3>Thank you for choosing the Awesome App!</h3>
          <div id="logo">
            <img src="http://code.ionicframework.com/assets/img/app_icon.png">
          </div>
          <p>
            We've worked super hard to make you happy.
          </p>
          <p>
            But if you are angry, too bad.
          </p>
        </ion-slide>
        <ion-slide>
          <h3>Using Awesome</h3>

          <div id="list">
            <h5>Just three steps:</h5>
            <ol>
              <li>Be awesome</li>
              <li>Stay awesome</li>
              <li>There is no step 3</li>
            </ol>
          </div>
        </ion-slide>
        <ion-slide>
          <h3>Any questions?</h3>
          <p>
            Too bad!
          </p>
        </ion-slide>
      </ion-slide-box>

    </ion-view>
  </script>

  <script id="main.html" type="text/ng-template">
    <ion-view hide-back-button="true" title="Awesome">
      <ion-content padding="true">
        <h1>Main app here</h1>
        <button class="button" ng-click="toIntro()">Do Tutorial Again</button>
      </ion-content>
    </ion-view>
  </script>

</body>
</html>
